<template>
     <flexbox class="flex-product"  wrap="wrap" :gutter="0" align="flex-start">
      <flexbox-item class="flex-item" :span="1/2" v-for="(product, index) in list" :key="index">
        <router-link :to="'/products/' + product.id">
          <div class="product">
            <x-img :src="product.thumb_img" default-src="/static/thumb-small.png" container="#vux_view_box_body"></x-img>
            <p>{{product.name}}</p>
            <div class="item-footer">
              <span class="price">￥{{product.price}}</span>
              <span class="sales-count">已售{{product.sales_count + product.start_sales_count}}件</span>
            </div>
          </div>
        </router-link>
      </flexbox-item>
     </flexbox>
</template>

<script>
import { Flexbox, FlexboxItem, XImg } from 'vux'
export default {
  components: {
    Flexbox,
    FlexboxItem,
    XImg
  },
  props: {
    list: {
      type: Array,
      default: function () {
        return []
      }
    }
  }
}
</script>
<style scoped lang="less">
  .flex-product {
    padding-top: 4px;
  }
  .flex-item:nth-child(odd) .product{
    padding-right: 2px;
  }
  .flex-item:nth-child(even) .product{
    padding-left: 2px;
  }
  .flex-item .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .flex-item .product p{
    text-indent: 14px;
    text-align: center;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-bottom: 5px;
    color: #252525;
    font-size: 14px;
    height: 42px;
    background: #fff;
    padding-top: 10px;
  }
  .flex-item .item-footer {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
  }
  .flex-item .product .price {
    padding-left: 2px;
    font-size: 16px;
    color: @tabbar-text-active-color;
  }
  .flex-item .product img {
    min-height: 100px;
  }
  .flex-item .product .sales-count {
    padding-right: 2px;
    font-size: 16px;
    color: #7E7E7E;
    float: right;
  }
</style>